<template>
  <!--查询表单-->
  <el-form :inline="true" class="demo-form-inline">

    <!-- 一级分类 -->
    <el-form-item label="一级分类">
      <el-select
        v-model="catalog1Id"
        placeholder="请选择"
        @change="catalog1Changed">
        <el-option
          v-for="catalog in catalogList1"
          :key="catalog.id"
          :label="catalog.name"
          :value="catalog.id"/>
      </el-select>
    </el-form-item>

    <!-- 二级分类 -->
    <el-form-item label="二级分类">
      <el-select
        v-model="catalog2Id"
        placeholder="请选择"
        @change="catalog2Changed">
        <el-option
          v-for="catalog in catalogList2"
          :key="catalog.id"
          :label="catalog.name"
          :value="catalog.id"/>
      </el-select>
    </el-form-item>

    <!-- 三级分类 -->
    <!--<el-form-item label="三级分类">-->
      <!--<el-select-->
        <!--v-model="catalog3Id"-->
        <!--placeholder="请选择"-->
        <!--@change="catalog3Changed">-->
        <!--<el-option-->
          <!--v-for="catalog in catalogList3"-->
          <!--:key="catalog.id"-->
          <!--:label="catalog.name"-->
          <!--:value="catalog.id"/>-->
      <!--</el-select>-->
    <!--</el-form-item>-->

  </el-form>

</template>

<script>

export default {

  data() {
    return {
      // 查询表单数据
      catalog1Id: null,
      catalog2Id: null,
      catalog3Id: null,
      catalogList1: [],
      catalogList2: [],
      catalogList3: []
    }
  },

  // 初始化一级类别
  created() {
      this.axios.get('/admin/category1/get').then(res=>{
          this.catalogList1 = res
      });
  },

  methods: {
    // 切换二级类别
    catalog1Changed() {
        this.axios.get('/admin/category2/get/'+this.catalog1Id).then(res=>{
            this.catalogList2 = res
        });
    },
      catalog2Changed() {
          this.$emit('listenOnSelect', this.catalog2Id)
          // this.axios.get('/admin/category2/get/'+this.catalog1Id).then(res=>{
          //     this.catalogList2 = res
          //     // 子组件向父组件传值
          //     this.$emit('listenOnSelect', this.catalog2Id)
          // });
      }

  }

}
</script>

